<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue路由创建之动态匹配</title>
    <!-- 导入vue库依赖 -->
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
</head>
<!-- 第一步导入vue和vuerouter js文件 -->

<body>
    <div id="app">
        <!-- 第二步申明router link标签 -->
        <router-link to="/user/1">User1</router-link>
        <router-link to="/user/2">User2</router-link>
        <router-link to="/user/3">User3</router-link>
        <router-link to="/register">Register</router-link>

        <!-- 第三部 申明组件占位符 -->

        <router-view></router-view>
    </div>
    <script>
        // 第四步 创建组件
        var User = {
            props: ['id', 'name', 'age'],
            // 第一种方式
            // template: `<h3>user中动态拿到路径规则中的id值: {{$route.params.id}}</h3>`
            // 第二种方式
            // template: `<h3>user中动态拿到路径规则中的id值: {{id}}</h3>`
            //第三种方式
            // template: `<h3>user中动态拿到路径规则中的id值: {{id}} -------- name : {{name}} ------ age : {{age + 2}}</h3>`
            // 第四种方式
            template: `<h3>user中动态拿到路径规则中的id值: {{id}} -------- name : {{name}} ------ age : {{age + 2}}</h3>`
        }

        var Register = {
            template: `<h3>register</h3>`
        }

        // 第五步 创建vue router实例
        var router = new VueRouter({
            // 所有的路由规则定义处
            routes: [
                // 重定向到user路由处
                { path: '/', redirect: '/user' },
                {
                    path: '/user/:id',
                    component: User,
                    // 第一种不用定义prop属性值
                    // 第二种
                    // props:true
                    // 第三种 传递对象
                    // props: { name: 'lishi', age: 18 }
                    // 第四种 传递函数
                    props: route => ({ name: 'lishi', age: 18, id: route.params.id })
                }, {
                    path: '/register',
                    component: Register
                }]
        })


        // 第六步  挂载router实例对象到vue实例上
        var vm = new Vue({
            el: '#app',
            router: router,
            data: {
                msg: ''
            },
            methods: {},
        })
    </script>
</body>

</html>

<!-- 路由管理器动态实现路由 -->

<!-- 在组件中动态拿到路径匹配规则方法 $route.params.id  其中id是自定义在路径匹配规则中 -->

<!-- 路由传参方式：
1.单纯的传递路由匹配规则属性值 使用$route.params.id
2.同规则1一样 可设置props属性为true  在组件中定义props定义属性数组 拿到传递值
3.定义props为对象，传递对象的属性值 但是不能传递路径id值
4.定义一个函数 传递定义值和匹配规则id值-->